import React, {memo, useCallback, useEffect, useState} from 'react';
import {FriendListWrapper} from "./style";
import {getFriendList, deleteFriend} from "@/network/friend.request";
import moment from "moment";
import {Button, Image, Modal, Table} from "antd";
import setMessage from "@/utils/setMessage";
import {withRouter} from "react-router";

function FriendList(props) {
  const {userId, history} = props;
  const [friendList, setFriendList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState("");
  const [friendId, setFriendId] = useState();

  const changeFriendList = useCallback(() => {
    getFriendList(userId).then(res => {
      setFriendList(res);
      setIsLoading(false);
    }).catch(console.log)
  }, [userId])

  useEffect(() => {
    setIsLoading(true);
    changeFriendList();
  }, [changeFriendList])

  // 修改
  const handleUpdate = useCallback((record) => {
    history.push(`/admin/add_friend/u/${userId}/${record.key}`);
  }, [history, userId])

  // 删除
  const handleDelete = useCallback((record) => {
    setVisible(true)
    setFriendId(record.key)
    setModalText(`确定删除好友 ${record.name}`)
  }, [])

  const columns = [
    {
      title: "id",
      dataIndex: "key",
      key: "key",
      align: "center",
      sorter: (a, b) => a.key - b.key,
      sortDirections: ["descend", "ascend"],
      width: 100,
      ellipsis: true
    },
    {
      title: "昵称",
      dataIndex: "name",
      key: "name",
      align: "center",
      width: 150,
      ellipsis: true
    },
    {
      title: "简介",
      dataIndex: "friendDesc",
      key: "friendDesc",
      align: "center",
      width: 200,
      ellipsis: true
    },
    {
      title: "链接",
      dataIndex: "link",
      key: "link",
      align: "center",
      width: 200,
      ellipsis: true
    },
    {
      title: "头像",
      dataIndex: "avatar",
      key: "avatar",
      align: "center",
      width: 200,
      render: (value) => (<>
        <Image
          style={{maxWidth: "56px"}}
          src={value}
          fallback=""
        />
      </>)
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      align: "center",
      width: 200,
      sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
      sortDirections: ["descend", "ascend"],
      render: (value) => (<>
        <span>
          {moment(value).format("YYYY-MM-DD HH:mm:ss")}
        </span>
      </>)
    },
    {
      title: "操作",
      dataIndex: "todo",
      key: 'todo',
      align: "center",
      render: (text, record) => (<>
        <Button onClick={e => handleUpdate(record)} type="primary" size="small" className="mr-2">修改</Button>
        <Button onClick={e => handleDelete(record)} type="primary" size="small" danger>删除</Button>
      </>)
    }
  ]

  const handleOk = useCallback(() => {
    setConfirmLoading(true);
    deleteFriend(friendId).then(res => {
      if (res.affectedRows) {
        setMessage("删除好友成功", "success")
        changeFriendList();
      } else {
        setMessage("删除好友失败", "error")
      }
      setConfirmLoading(false)
      setVisible(false);
    }).catch(error => {
      setMessage("删除好友失败", "error");
      setVisible(false);
      setConfirmLoading(false)
      console.log(error);
    })
  }, [friendId, changeFriendList])

  return (
    <FriendListWrapper>
      {
        friendList && friendList.length > 0 && (
          <>
            <Table
              pagination={false}
              columns={columns}
              dataSource={friendList}
              size="middle"
              loading={isLoading}
              scroll={{y: "73vh"}}
            />
            <Modal
              title="删除操作"
              visible={visible}
              onOk={handleOk}
              cancelText="取消"
              okText="确定"
              confirmLoading={confirmLoading}
              onCancel={e => setVisible(false)}
            >
              <p>{modalText}</p>
            </Modal>
          </>
        )
      }
    </FriendListWrapper>
  )
}

export default memo(withRouter(FriendList))
